<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>确认订单</title>
  <link rel="icon" href="">
  <meta name='viewport' content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../res/core/base.css">
  <link rel="stylesheet" href="confirm.css">
  <style type="text/css">
    #app {
      /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
      margin-top: -1px;
    }

    .fright {
      float: right;
    }

    ul.mui-table-view {
      margin-bottom: 1rem;
    }

    #btnOK {
      margin: auto 2rem;
      width: calc(100vw - 4rem);
    }
  </style>
</head>
<body class="mui-content">
<div id="app">
  <div class="address">{{address}}</div>
  <ul class="mui-table-view mui-table-view-chevron">
    <li class="mui-table-view-cell">
      服务类型<span class="fright">{{serviceType}}</span>
    </li>
    <template v-for="item in prices">
      <li class="mui-table-view-cell">
        <a class="">
          <span class="fright">{{item.number}}</span>
          {{item.name}} - {{item.price}}
        </a>
      </li>
    </template>
  </ul>
  <ul class="mui-table-view mui-table-view-chevron">
    <li class="mui-table-view-cell">
      配送费<span class="fright" style="color:#ff8249;">{{freightFee}}元</span>
    </li>
    <li class="mui-table-view-cell">
      共计<span class="fright" style="color:#ff8249;">{{total/100}}元</span>
    </li>
    <li class="remark">
      {{remark}}
    </li>
  </ul>
  <button type="button" id="btnOK" class="mui-btn mui-btn-success mui-btn-block">确认订单</button>
</div>
<script src="../../res/core/require.js"></script>
<script src="../../res/core/main.js"></script>
<script src="confirm.js"></script>
</body>
</html>
